<template>
  <div class="cash-box">
    <div class="item-cash-title"><span class="title-icon"></span>额外奖励积分充值</div>
    <div class="cash-title-list">
      <div
        class="item-title"
        :class="{action:Action==='1'}"
        @click="OnlineCash('1')"
      >会员列表</div>
      <div
        class="item-title"
        :class="{action:Action==='2'}"
        @click="OnlineCash('2')"
      >充值记录</div>
    </div>
    <div
      class="table-list-box"
      v-if="Action==='1'"
    >
      <VipList></VipList>
    </div>
    <div
      class="table-list-box"
      v-if="Action==='2'"
    >
      <Record></Record>
    </div>
  </div>
</template>
<style scoped>
.cash-box {
  background-color: #ffffff;
  margin: 0px 18px;
}

.item-cash-title {
  line-height: 60px;
  border-bottom: 1px solid #bfbfbf;
}

.cash-title-list {
  display: flex;
  height: 50px;
  margin: 15px 20px 0px 20px;
  border-bottom: 1px solid #0064e4;
}

.item-title {
  width: 120px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #bfbfbf;
  border-bottom: 1px solid #0064e4;
  text-align: center;
  cursor: pointer;
}

.action {
  color: #0064e4;
  border-color: #0064e4 !important;
  background-color: #fff;
  border-bottom-color: #fff !important;
}

.title-icon {
  margin-left: 15px;
  padding-left: 12px;
  border-left: 12px solid #0064e4;
}
</style>
<script>
import Record from './Record/Record.vue';
import VipList from "./VipList/VipList.vue";
export default {
  components: {
    VipList,
    Record
  },
  data () {
    return {
      Action: '1',
    }
  },
  methods: {
    OnlineCash (num) {
      this.Action = num;
    }
  }
}

</script>